<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--
    	作者：zyl
    	时间：2017-06-01
    	描述：drawImage
   定义和用法
drawImage() 方法在画布上绘制图像、画布或视频。
drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。
JavaScript 语法 1
在画布上定位图像：
context.drawImage(img,x,y);
JavaScript 语法 2
在画布上定位图像，并规定图像的宽度和高度：
context.drawImage(img,x,y,width,height);
JavaScript 语法 3
剪切图像，并在画布上定位被剪切的部分：
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);	

参数值

参数				描述
img		规定要使用的图像、画布或视频。
sx		可选。开始剪切的 x 坐标位置。
sy		可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x		在画布上放置图像的 x 坐标位置。
y		在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度。（伸展或缩小图像）
height	可选。要使用的图像的高度。（伸展或缩小图像）
    -->
	<body>
		<canvas id="canvas" style="display: block;margin: 0 auto; border: 1px solid #aaa;">
			您的浏览器不支持canvas
		</canvas>
	</body>
	<script>
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		 canvas.width=1200;
		 canvas.height=900;
		 
		 var image = new Image();
		 image.src="../img/780.jpg";//
		 image.onload = function(){//图片加载完成后再绘制
		 //	context.drawImage(image,0,0);
		// context.drawImage(image,0,0,canvas.width,canvas.height);//比例
		 context.drawImage(image,200,600,500,500,300,400,500,500);//缩放
		 }
		 
	</script>
</html>
